<template>
  <div class="body">
    <div
      ref="mapContainer"
      class="map-container"
      style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
    ></div>
    <Title />
    <Keynote />
    <Pollute />
    <Situation />
    <Discharge />
    <Proportion />
    <Flow />
    <Onlinesituation />
    <insert />
    <monitor />
    <alarmrecord />
    <record />
    <Map />
  </div>
</template>

<script>
import Title from '@/components/visualization/title.vue'
import Keynote from '@/components/visualization/keynote.vue'
import Pollute from '@/components/visualization/pollute.vue'
import Situation from '@/components/visualization/situation.vue'
import Discharge from '@/components/visualization/discharge.vue'
import Proportion from '@/components/visualization/proportion.vue'
import Flow from '@/components/visualization/flow.vue'
import Map from '@/components/visualization/map.vue'
import Onlinesituation from '@/components/visualization/onlinesituation.vue'
import insert from '@/components/visualization/insert.vue'
import monitor from '@/components/visualization/monitor.vue'
import alarmrecord from '@/components/visualization/alarmrecord.vue'
import record from '@/components/visualization/record.vue'
export default {
  components: {
    Title,
    Keynote,
    Pollute,
    Situation,
    Discharge,
    Proportion,
    Flow,
    Map,
    Onlinesituation,
    insert,
    monitor,
    alarmrecord,
    record,
  },
}
</script>

<style scoped>
.body {
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #0d325f;
  display: flex;
  flex-direction: column;
  height: 201vh;
  margin: 0;
  position: relative;
}
</style>
